<template>
  <div class="task-details">
    <div class="share-details-top">
      <div :style="{height: statusBarHeight + 'px'}"></div>
      <div class="share-details-title posre"
           :style="{height: navHeight+'px'}">
           <div class="goBack" @click="goBack()">
             <image class="icon-back" :src="imgUrl" mode=""></image>
           </div>
           <p class="navgation-title fbold fs18 cfff">{{title}}</p>

           <p></p>
      </div>
      <div class="middle" :style="{'background-image':'url('+cardImgUrl+')'}" v-show="taskdetail != ''">
        <div class="middle-title">
           {{taskdetail.taskName}}
        </div>
        <div class="middle-centent">
          <div class="time">
            <div class="time-left">
              <div class="time-axis">
                <div class="dots-box">
                  <div class="dots">
                    <span class="bblue4"></span>
                    <p>至</p>
                    <span class="byellow4"></span>
                  </div>
                  <div class="time-line"></div>
                </div>
              </div>
              <div class="data">
                <p>{{taskdetail.startTime}}</p>
                <p>{{taskdetail.endTime}}</p>
              </div>
            </div>
          </div>
          <div class="title">
            <div class="title-top mb10">
              <span></span>
              <p class="fs14 c38 fbold ml7">指定文章</p>
            </div>
            <p class="fs14 ml15 received-title fbold c38">{{taskdetail.title}}</p>
          </div>
          <div class="target">
            <div class="target-title">
              <span></span>
              <p class="c38 fs14 ml7">任务情况</p>
            </div>
            <div class="target-number">
              <div class="number-box bblue">
                <image class="w10 h10 mr6" :src="shareImg"></image>
                <p class="cblue fs12">文章分享次数  <span class="fbold">{{taskdetail.shareNum}}</span></p>
              </div>
              <div class="number-box byellow">
                <image class="w10 h10 mr6" :src="addImg"></image>
                <p class="cyellow fs12">新增获客次数  <span class="fbold">{{taskdetail.visitNum}}</span></p>
              </div>
            </div>
          </div>
          <div class="share-records-bottom" v-if="taskdetail.state == 0">
            <div class="time-data">距离结束
              <span>{{taskdetail.time.day}}</span>天
              <span>{{taskdetail.time.hour}}</span>时
              <span>{{taskdetail.time.minute}}</span>分
              <span>{{taskdetail.time.second}}</span>秒
            </div>
            <p class="cblue fs14">进行中</p>
          </div>
          <div class="share-records-bottoma" v-else>
            {{taskdetail.state}}
          </div>
        </div>
      </div>
    </div>
    <div class="task-finish" v-show="taskdetail != ''">
      <p class="fs20 c38 fbold">我的完成情况<span class="cblue ml6 fs14 fnormal">FINISH</span></p>
      <div class="personnel">
        <image class="w50 h50" :src="taskdetail.myTask[0].avatarUrl"></image>
        <p class="c38 fs14 mt10 mb10">{{taskdetail.myTask[0].nickeName}}</p>
        <p class="ca8 fs12">{{taskdetail.myTask[0].position}}</p>
      </div>
      <div class="circle-box">
        <circleProgerss :number="sharenumber" :percent="shareNumPercentage"></circleProgerss>
        <circleProgerssa :number="visitnumber" :percent="visitNumPercentage"></circleProgerssa>
      </div>
    </div>
      <div class="end-task" @click="share_tag()">去分享</div>
    </div>
  </div>
</template>
<script>
import WXAJAX from '../../../utils/request.js'
import circleProgerss from '../../../components/circleProgerss'
import circleProgerssa from '../../../components/circleProgerssA'
import tools from "@/utils/index"
export default {
  components:{
    circleProgerss,
    circleProgerssa
  },
  data(){
    return {
      //设置头部需要的参数
      title:'任务详情',
      navHeight: 0,
      statusBarHeight: 0,
      imgUrl:WXAJAX.imgBackUrl + '/marketing/icon_back.png',
      cardImgUrl:WXAJAX.imgBackUrl + '/marketing/img_bg_task1.png',
      addImg:WXAJAX.imgBackUrl+'/marketing/icon_add_user%402x.png',
      shareImg:WXAJAX.imgBackUrl+'/marketing/icon_share_s%402x.png',
      tabber:[
        {
          name:'未查看',
          tag:'notViewed',
          isSelect:true
        },
        {
          name:'未完成',
          tag:'incomplete',
          isSelect:false
        },
        {
          name:'已完成',
          tag:'completed',
          isSelect:false
        }
      ],
      isShow:'notViewed',
      progress:100,
      jindu:100,
      userName:wx.getStorageSync('userName'),
      taskCustomerId:wx.getStorageSync('taskCustomerId'),
      userId:wx.getStorageSync('userId'),
      userId:wx.getStorageSync('userId'),
      taskdetail:'',
      shareNumPercentage:'',
      visitNumPercentage:'',
      sharenumber:{
        shareNums:'',
        shareNum:'',
      },
      visitnumber:{
        visitNums:'',
        visitNum:''
      }
    }
  },
  watch:{
    taskdetail(newVal,old){
      this.timer(newVal)
      newVal.endTimes  = tools.getdate(newVal.endTime,'data')
      newVal.startTimes  = tools.getdate(newVal.startTime,'data')
      console.log(newVal.endTimes)
      if(newVal.state == 1){
        newVal.state = '未开始'
      }else if(newVal.state == 2){
        newVal.state = '已结束'
      }else if(newVal.state == 3){
        newVal.state = '已结束'
      }
       //需要用到endTime 所以新存一个时间
       var data = new Date().getTime()
       this.sharenumber.shareNums = parseInt(newVal.shareNum)
       this.sharenumber.shareNum = parseInt(newVal.myTask[0].shareNum),
       this.visitnumber.visitNums = parseInt(newVal.visitNum),
       this.visitnumber.visitNum = parseInt(newVal.myTask[0].visitNums)

       this.shareNumPercentage = Math.ceil(this.sharenumber.shareNum/this.sharenumber.shareNums)
       console.log(this.shareNumPercentage)
        if(this.shareNumPercentage == Infinity){
          this.shareNumPercentage = 0
        }
        this.visitNumPercentage = Math.ceil(this.visitnumber.visitNum/this.visitnumber.visitNums)
         if(this.visitNumPercentage == Infinity){
           this.visitNumPercentage = 0
         }
    }
  },
  created() {
    this.calculateNavBarHeight()

    this.taskCustomerId = wx.getStorageSync('taskCustomerId');

    //console.log(this.taskCustomerId)
  },
  mounted() {

    this.getQueryMyTaskDetail()
  },
  methods:{
    //计算高度
    calculateNavBarHeight () {
      let menuButtonBounding = getApp().globalData.menuButtonBounding;
      wx.getSystemInfo({
        success: res => {
          let statusBarHeight = res.statusBarHeight; //胶囊按钮与顶部的距离
          console.log(statusBarHeight)
          let navHeight =
            statusBarHeight +
            (menuButtonBounding.top - statusBarHeight) * 2 +
            menuButtonBounding.height; //导航高度
          getApp().globalData.navHeight = navHeight;
          this.statusBarHeight = statusBarHeight
          this.navHeight = navHeight - statusBarHeight;
        },
        fail (err) {
          console.log(err);
        }
      });
    },
    getQueryMyTaskDetail(){
      wx.showLoading();
      WXAJAX.POST({
        type:1,
        taskCustomerId:this.taskCustomerId,
        userId:this.userId
      },'','/customerEssay/queryMyTaskDetail').then((data) =>{
        if(data){
          data.time={
               day:'00',
               hour:'00',
               minute:'00',
               second:'00'
             }
          this.taskdetail = data
          this.getUpdateMyTaskState(this.taskdetail.userId)
        }
      })
    },
    getUpdateMyTaskState(userId){
      WXAJAX.POST({
        taskCustomerId:this.taskCustomerId,
        state:'',
        userId:userId
      },'','/customerEssay/updateMyTaskState').then((data) =>{
        wx.hideLoading();

      })
    },
    goBack(){
      wx.navigateBack({
        delete:1
      })
    },
    //倒计时
    timer(list){
      let than = this
      this.temp = setInterval(()=>{
          var end = list.endTime
          end = this.getDateConversion(end)
          var date = new Date()
          var now = date.getTime()
          var leftTime = end - now //时间差
          var d, h, m, s
          var date = new Date()
          var now = date.getTime()
          var end = end    //this.treasu_data 在data中定义的,后台拿到的结束时间戳
          var leftTime = end - now //时间差
          var d, h, m, s
          if (leftTime >= 0) {
          d = Math.floor(leftTime / 1000 / 60 / 60 / 24)
          h = Math.floor(leftTime/1000/60/60%24)
          m = Math.floor((leftTime / 1000 / 60) % 60)
          s = Math.floor((leftTime / 1000) % 60)
          if (d < 10) {
            d = '0' + d
          }
          if (s < 10) {
            s = '0' + s
          }
          if (m < 10) {
            m = '0' + m
          }
          if(h < 10) {
          h =  '0' + h
           }
          } else {
            // console.log('已截止')
          }
          list.time={
            day:d,
            hour:h,
            minute:m,
            second:s
          }
      },1000)
    },
    share_tag(){
      var did = this.taskdetail.dynamicId
      var cid = wx.getStorageSync('COMPANYID')
      wx.navigateTo({
      url:`../../companyPack/shareNow/main?id=${did}&cid=${cid}`
      })
    },
    //解决ios时间格式兼容问题
    getDateConversion(data){
        let phoneSystem = ''
        wx.getSystemInfo({
          success:function(res){
            phoneSystem = res.system
          }
        });
        if(phoneSystem.indexOf("iOS") != -1){
          data = data.replace(/-/g, '/');
        }
        return Date.parse(data)
      }
  },
  destroyed() {
    wx.removeStorageSync('taskCustomerId');
    clearInterval(this.temp)
  }
};
</script>
<style scoped>
.task-details{
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  overflow: hidden;
}
.share-details-top{
    background: linear-gradient(to bottom, #51cdcc, #ffffff);
 }
.share-details-title{
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding-left: 20upx;
    padding-right: 100upx;
}
.navgation-title{
  display: flex;
  font-size:36px;
}
.title{
  padding:20upx 30upx 20upx 40upx;
}
.title span{
  display: block;
  box-sizing: border-box;
  width: 16upx;
  height: 16upx;
  border-radius: 50%;
  background-color: #;
  border: 4upx solid #2BCF88;
  border-radius:50%;
}
.received-title{
  height: 75upx;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.title-top{
  display: flex;
  align-items: center;
}
.icon-back{
  width: 45upx;
  height: 36upx;
  margin-top: 2upx;
}
.goBack{
  width: 60upx;
  height: 100%;
  display: flex;
  align-items: center;
}
.middle{
   height: 735upx;
   width: 100%;
   box-sizing: border-box;
   padding:20upx 30upx 0upx 30upx;
   background-size: 100%;
   background-repeat:no-repeat;
   background-position:bottom;
}
.information-title{
  width: 476upx;
  word-break: break-all;
  display: -webkit-box; /**对象作为伸缩盒子模型展示**/
  -webkit-box-orient: vertical; /**设置或检索伸缩盒子对象的子元素的排列方式**/
  -webkit-line-clamp: 2; /**显示的行数**/
  overflow: hidden; /**隐藏超出的内容**/
}
.middle-title{
  height: 88upx;
  border-radius:20upx 20upx 0upx 0upx;
  padding:0 30upx;
  background-color: #FFFFFF;
  border-bottom:1upx solid #F5F5F6;
  display: flex;
  align-items: center;
  font-size: 32upx;
  font-weight:bold;
  color: #383838;
}
/* .middle {
  display: flex;
  align-items: flex-start;
  height: 120upx;
  align-items: flex-start;
} */
.time{
    padding:30upx 30upx 30upx 34upx;
    display: flex;
    justify-content: space-between;
    min-height: 100upx;
  }
  .time-left{
    display: flex;
  }
  .dots-box{
    width: 32upx;
    height: 94upx;
    position: relative;
    margin-top: 12upx;
  }
  .dots{
    position: absolute;
    top: 0;
    z-index: 99;
    width: 32upx;
    display: flex;
    justify-content: space-between;
    text-align: center;
    flex-direction: column;
    height: 94upx;

  }
  .dots p{
     display: block;
     width: 30upx;
     height: 30upx;
     text-align: center;
     line-height: 30upx;
     border-radius: 50%;
     border:1upx solid #E8E8E8;
     color: #A8A8A8;
     font-size: 20upx;
     background-color: #FFFFFF;
  }
  .dots span{
    display: block;
    box-sizing: border-box;
    width: 16upx;
    height: 16upx;
    border-radius: 50%;
    margin:0 auto;
    background-color: #FFFFFF;
  }
  .time-line{
    width: 2upx;
    height: 90upx;
    background: #E9E9E9;
    margin: auto;
  }
  .data{
    display: flex;
    height: 115upx;
    flex-direction: column;
    justify-content: space-between;
    margin-left: 9upx;
    font-size: 28upx;
    color: #A8A8A8;
  }
  .time-right{
    display: flex;
    height: 115upx;
    flex-direction: column;
    justify-content: space-between;
  }
  .check{
    display: flex;
    width: 170upx;
    justify-content: space-between;
    align-items: center;
  }
  .check-box{
    width: 105upx;
    height: 36upx;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-radius: 6upx;
  }
  .share-records-bottom{
    background-color: #FFFFFF;
    border-radius:0 0 20upx 20upx;
    height: 88upx;
    display: flex;
    justify-content: space-between;
    padding:0 30upx;
    align-items: center;
  }
  .time-data{
    display: flex;
  }
  .share-records-bottom span{
    display: block;
    height: 40upx;
    width: 50upx;
    font-size: 28upx;
    font-weight: bold;
    background-color: #383838;
    border-radius: 10upx;
    margin:0 9upx;
    color: #FFFFFF;
    text-align: center;
    line-height: 40upx;
  }
  .share-records-bottoma{
    background-color: #FFFFFF;
    border-radius:0 0 20upx 20upx;
    height: 88upx;
    display: flex;
    justify-content: center;
    padding:0 30upx;
    align-items: center;
    color: #383838;
    font-size: 28upx;
  }
  .target{
    height: 135upx;
    padding:0upx 30upx 40upx 40upx;
  }
  .target-title{
    display: flex;
    align-items: center;
    margin-bottom: 19upx;
  }
  .target-title span{
    display: block;
    box-sizing: border-box;
    width: 16upx;
    height: 16upx;
    border-radius: 50%;
    background-color: #FFFFFF;
    border:4upx solid #2BCF88;
  }
  .target-number{
    display: flex;
    justify-content: space-between;
  }
  .number-box{
    height: 50upx;
    padding:9upx 19upx 8upx 20upx;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-radius: 6upx;
  }
  .target ul{
    display: flex;
    justify-content: space-around;
  }
  .target ul li{
    text-align: center;
  }
  .target-box{
    height: 30upx;
    display: flex;
    padding:0 10upx;
    align-items: center;
    border-radius: 6upx;
    margin-bottom: 20upx;
  }
  .task-finish{
    display: flex;
    height: 537upx;
    flex-direction: column;
    padding:30upx 30upx 98upx 30upx;
  }
  .task-tabber{
    display: flex;

    padding:0 30upx;
    flex-direction: column;
  }
  .task-tabber ul{
    display: flex;
    justify-content: space-around;
    height: 88upx;
  }
  .task-tabber ul li{
    height: 100%;
    line-height: 88upx;
    position: relative;
    color: #383838;
    font-size: 28upx;
  }
  .task-tabber ul li span{
    display: block;
    height: 3upx;
    width: 100%;
    position: absolute;
    bottom: 0;
    background: #51CDCB;
  }
  .list-state{
    flex: 1;
    overflow: auto;
  }
  .list{
    height: 179upx;
    box-sizing: border-box;
    border-bottom:1upx solid #F5F5F6;
    padding:40upx 30upx 40upx 32upx;
    display: flex;
  }
  .end-task{
    height:88upx;
    border-radius: 10upx;
    position: fixed;
    bottom: 0;
    width: 690upx;
    text-align: center;
    line-height: 88upx;
    font-size: 36upx;
    margin:0 30upx;
    color: #FFFFFF;
    background:linear-gradient(90deg,#41DDA1,#2BCF88)
  }
  .information{
    height: 88upx;
    display: flex;
    justify-content: space-between;
    flex: 1;
  }
  .information-left{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .information-right{
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .personnel{
    width: 100%;
    box-sizing: border-box;
    padding: 50upx 0 30upx 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
  }
  .personnel image{
    border-radius: 50%;
    margin:0 auto;
  }
  .circle-box{
    display: flex;
    justify-content: space-around;
  }
</style>
